<!--
 * @Author: zhangxuanlin 3139158504@qq.com
 * @Date: 2025-01-27 10:33:55
 * @LastEditors: zhangxuanlin 3139158504@qq.com
 * @LastEditTime: 2025-01-27 15:27:12
 * @FilePath: \landscape-website\index.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: zhangxuanlin 3139158504@qq.com
 * @Date: 2025-01-27 10:33:55
 * @LastEditors: zhangxuanlin 3139158504@qq.com
 * @LastEditTime: 2025-01-27 11:21:40
 * @FilePath: \landscape-website\index.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自然之眼景观展示</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="logo">自然之眼</div>
        <ul class="nav-links">
            <li><a href="index.html">首页</a></li>
            <li><a href="gallery.html">景观图库</a></li>
            <li><a href="about.html">关于我们</a></li>
            <li><a href="contact.html">联系我们</a></li>
        </ul>
    </nav>

    <!-- 首页横幅 -->
    <header class="hero" style="background-image: url('./images/hero-bg.jpg')">
        <div class="hero-content">
            <h1>探索世界自然奇观</h1>
            <p>发现地球上最壮丽的自然景观</p>
        </div>
    </header>

    <!-- 特色景观区 -->
    <section class="featured">
        <h2>特色景观</h2>
        <div class="card-container">
            <div class="card">
                <img src="images/mountain.jpg" alt="山脉景观">
                <h3>壮丽山脉</h3>
                <p>探索世界最高峰与奇特地质构造</p>
                <a href="gallery.html#mountains" class="btn">查看详情</a>
            </div>
            <div class="card">
                <img src="images/waterfall.jpg" alt="瀑布景观">
                <h3>瀑布奇观</h3>
                <p>感受大自然的磅礴力量</p>
                <a href="gallery.html#waterfalls" class="btn">查看详情</a>
            </div>
            <div class="card">
                <img src="images/forest.jpg" alt="森林景观">
                <h3>原始森林</h3>
                <p>探索地球的绿色之肺</p>
                <a href="gallery.html#forests" class="btn">查看详情</a>
            </div>
        </div>
    </section>

    <footer>
        <p>&copy; 2023 自然之眼景观展示 保留所有权利</p>
    </footer>

    <script src="js/script.js"></script>
</body>
</html>